import React from 'react';
import {Table, Icon,  Card, Button, Modal} from 'antd';

import ActivityAdd from './add';
import {activityListApi} from '@/api/activity';
import Search from './search';

// import '@/css/pages/activity.css';

const title = () => <div> <Icon type="table" /> 活动列表</div>;

export default class HasAuth extends React.Component {
  state = {
    list: [],
    total: 0,
    loading: true,
    addModalVisible: false, // 添加框
    deleteModalVisible: false, //删除框
    deleteIdArray: [], //当前删除列表id
  };
  columns = [
    {
      key: 'url',
      dataIndex: 'url',
      title: '落地页URL',
      fixed: 'left',
      width: 200,
    },
    {
      key: 'car',
      dataIndex: 'car',
      title: '品牌/车系/车型',
      width: 200,
    },
    {
      key: 'startTime',
      dataIndex: 'startTime',
      title: '推广开始时间',
    },
    {
      key: 'endTime',
      dataIndex: 'endTime',
      title: '推广结束时间',
    },
    {
      key: 'budget',
      dataIndex: 'budget',
      title: '预算',
    },
    {
      key: 'consumed',
      dataIndex: 'consumed',
      title: '已消费',
    },
    {
      key: 'manNum',
      dataIndex: 'manNum',
      title: '报名人数',
    },
    {
      key: 'status',
      dataIndex: 'status',
      title: '状态',
    },
    {
      title: 'Action',
      key: 'action',
      fixed: 'right',
      width: 100,
      render: (text, record) => (
        <span className="page-activity-tbutton">
          <Button type="default" title="关闭" icon="close" data={record.id}></Button>
          <Button type="primary" title="编辑" icon="edit" data={record.id}></Button>
          <Button type="danger" title="删除" icon="delete" data={record.id}  onClick={() => {this.showDeleteModal(record.id)}}></Button>
        </span>
      ),
    },
  ];
  componentDidMount () {
    activityListApi ().then (res => {
      if (res.code === 0) {
        this.setState ({
          list: res.data.list[0],
          total: res.data.list[1],
          loading: false,
        });
      } else {
        this.setState ({
          loading: false,
        });
      }
    });
  }
  showAddModal = () => {
    this.setState({
      addModalVisible:true
    })
  };
  hideAddModal = () => {
    this.setState({
      addModalVisible:false
    })
  };
  showDeleteModal = (id) => {
    this.setState({
      deleteIdArray: [id]
    });
    this.setState({
      deleteModalVisible: true
    });
  };
  hideDeleteModal = () => {
    this.setState({
      deleteModalVisible: false
    });
  }
  render () {
    const {columns} = this;
    const {list, loading, addModalVisible ,deleteModalVisible} = this.state;
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log (
          `selectedRowKeys: ${selectedRowKeys}`,
          'selectedRows: ',
          selectedRows
        );
      },
      getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      }),
      fixed: true
    };
    return (
      <div className="page-activity">
        <Card title={title ()} bordered={false}>
          {/* 搜索 */}
          <Search />
          {/* 操作 */}
          <div className="page-activity-buttons">
            <Button type="primary" icon="plus" onClick={this.showAddModal}>增加</Button>
            <Button type="primary" icon="plus">批量增加</Button>
            <Button type="danger" icon="delete">删除</Button>
          </div>
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={list}
            bordered={true}
            loading={loading}
            rowKey="id"
            scroll={{ x: 1000 }} 
            locale={{
              emptyText: '您还没有添加数据哦，快去添加吧',
            }}
          />
        </Card>
        {/* 增加 or 编辑 */}
        <Modal
          visible={addModalVisible}
          title="新增活动"
          onCancel={this.hideAddModal}
          width={400}
          maskClosable={false}
          footer={null}
        >
          <ActivityAdd />
        </Modal>
        {/* 删除 */}
        <Modal
          visible={deleteModalVisible}
          title="删除活动"
          onCancel={this.hideDeleteModal}
          width={400}
          maskClosable={false}
        >
          请确认是否删除？
        </Modal>
      </div>
    );
  }
}
